<template>
  <div class="reset-password">
    <el-row type="flex" justify="center">
      <el-col :span="15">
        <el-form :model="passwordForm" ref="passwordFormRef" :rules="rules" label-width="100px">
          <el-form-item label="旧密码" prop="oPassword">
            <el-col :span="12">
              <el-input type="password" v-model="passwordForm.oPassword"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="新的密码" prop="nPassword">
            <el-col :span="12">
              <el-input type="password" v-model="passwordForm.nPassword"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="确认密码" prop="nRePassword">
            <el-col :span="12">
              <el-input type="password" v-model="passwordForm.nRePassword"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitChangePsd">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { changeUserPasswrodApi } from "@/api/user";
export default {
  name: "ResetPassword",
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.passwordForm.checkPass !== "") {
        this.$refs.passwordFormRef.validateField("checkPass");
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.passwordForm.nPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      passwordForm: {
        oPassword: "",
        nPassword: "",
        nRePassword: "",
      },
      rules: {
        oPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码须大于等于6位小于20位",
            trigger: "blur",
          },
        ],
        nPassword: [
          { required: true, message: "请输入新的密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码须大于等于6位小于20位",
            trigger: "blur",
          },
        ],
        nRePassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码须大于等于6位小于20位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    submitChangePsd() {
      this.$refs.passwordFormRef.validate(async (valid) => {
        if (!valid) return;
        let { code } = await changeUserPasswrodApi(
          this.passwordForm.oPassword,
          this.passwordForm.nPassword
        );
        if (code !== 200) return;
        this.$refs.passwordFormRef.resetFields();
        this.$message.success("修改密码成功");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.reset-password {
  margin-top: 20px;
}
</style>
